<template>
    <div class="report-five">
        <div class="body">
            <div class="list">
                <h4>
                    <span>05</span>文综知识得分情况分析
                </h4>
                <div class="paint">
                    <div class="table">
                        <el-table stripe :data="tableData" style="width: 100%" header-align="center" empty-text="暂无数据" class="report-table">
                            <el-table-column prop="knowledgeI" label="知识板块" align="center"></el-table-column>
                            <el-table-column prop="avgScoringRate" label="平均得分率" align="center">
                                <template scope="scope">
                                    {{Math.round(scope.row.avgScoringRate*100)}}%
                                </template>
                            </el-table-column>
                            <el-table-column prop="selfScoringRate" label="个人得分率" align="center">
                                <template scope="scope">
                                    {{Math.round(scope.row.selfScoringRate*100)}}%
                                </template>
                            </el-table-column>
                            <el-table-column label="成就度" align="center">
                                <template scope="scope">
                                    <span>{{scope.row.levelText}}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>

                    <div class="chart" v-if="showChart">
                        <chart :options="option" :style="{width:'100%','margin-left':'10%',height:'300px'}"></chart>
                        <div class="legend">
                            <span>
                                <i class="avg"></i>平均得分率</span>
                            <span>
                                <i class="get"></i>个人得分率</span>
                        </div>
                    </div>
                </div>
                <div class="info">
                    <p>
                        {{showText}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import io from '../../lib/io'
import util from '../../lib/util'
import echarts from 'echarts'

export default {
    data() {
        return {
            reportId: '',
            showText: '',
            tableData: [],
            showChart: false,
            option: {
                dataZoom: [{
                    type: 'inside',
                    zoomLock:'true',
                    show: true, //flase直接隐藏图形
                    xAxisIndex: [0],
                    left: '9%', //滚动条靠左侧的百分比
                    bottom: -5,
                    start: 0,//滚动条的起始位置
                    end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }],
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            fontSize: 12,
                            rotate: -18,
                        },
                        interval: 16
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 1,
                        axisLabel: {
                            formatter: function(value, index) {
                                return value * 100 + '%'
                            },
                            fontSize: 14,
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '平均得分率',
                        type: 'bar',
                        data: [],
                        itemStyle: {
                            normal: {
                                //颜色渐变
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fe8a7f'
                                }, {
                                    offset: 1,
                                    color: '#f73a62'
                                }])
                            }
                        },
                    },
                    {
                        name: '个人得分率',
                        type: 'bar',
                        data: [],
                        itemStyle: {
                            normal: {
                                //颜色渐变
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#4c5ceb'
                                }, {
                                    offset: 1,
                                    color: '#08025e'
                                }])
                            }
                        }
                    }
                ]
            },
        }
    },
    created() {
        this.reportId = this.$route.query.reportId
        this.reportKnow()
    },
    methods: {
        reportKnow() {
            let param = {
                reportId: this.reportId,
                sysCode: this.sysCode,
            }
            io.post(io.reportKnowI, param, (ret) => {
                this.showText = ret.comment
                let data = ret.list
                let knowledgeI = []
                let selfScoringRate = []
                let avgScoringRate = []
                this.tableData = data
                data.map((item) => {
                    knowledgeI.push(item.knowledgeI)
                    selfScoringRate.push(item.selfScoringRate)
                    avgScoringRate.push(item.avgScoringRate)
                    item.levelText= util.showLevel(item.selfScoringRate,[0.7,0.5,0.3],['优秀','良好','待提高','薄弱'])
                })

                this.option.xAxis[0].data = knowledgeI
                this.option.series[0].data = avgScoringRate
                this.option.series[1].data = selfScoringRate
                this.showChart = true
            })
        }
    }
}
</script>
<style lang="less" scoped>
.report-five {

    .body {
        padding: 46px 0;
        background: #fff;
        .list {
            width: 80%;
            max-width: 960px;
            margin: 0 auto;
            h4 {
                font-size: 32px;
                color: #ff7853;
                margin: 0;
                height: 32px;
                line-height: 32px;
                font-weight: 100;
                span {
                    height: 32px;
                    line-height: 32px;
                    font-weight: 100; // display: inline-block;
                    float: left;
                    font-size: 40px;
                    color: #488eed;
                    padding-right: 24px;
                    margin-right: 17px;
                    border-right: 2px solid #488eed;
                }
            }
            .paint {
                margin-top: 40px;
                width: 100%;
                display: box;
                /* OLD - Android 4.4- */
                display: -webkit-box;
                /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;
                /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;
                /* TWEENER - IE 10 */
                display: -webkit-flex;
                /* NEW - Chrome */
                display: flex;
                .table {
                    display: inline-block;
                    width: 56%;
                }
                .chart {
                    -webkit-box-flex: 1;
                    /* OLD - iOS 6-, Safari 3.1-6 */
                    -moz-box-flex: 1;
                    /* OLD - Firefox 19- */
                    -webkit-flex: 1;
                    /* Chrome */
                    -ms-flex: 1;
                    /* IE 10 */
                    flex: 1;
                    .legend {
                        text-align: center;
                        margin-top: 20px;
                        font-size: 16px;
                        i {
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            vertical-align: -2px;
                            margin-right: 10px;
                        }
                        span+span {
                            margin-left: 40px;
                        }
                        .all {
                            background-color: #d0dafd;
                        }
                        .get {
                            background: #336af0;
                        }
                        .avg {
                            background: #ff5501;
                        }
                    }
                }
            }
            .info {
                margin-top: 40px;
                font-size: 16px;
                em {
                    font-style: normal;
                }
            }
        }
    }
}
</style>
<style lang="less">
.report-five {
    .report-table {

        border: solid 1px #a3c6f6;
        border-radius: 0; // border-top:1px solid #9ab9df !important;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        font-size: 16px;
        &.el-table th,
        .el-table__fixed-header-wrapper thead div,
        .el-table__header-wrapper thead div,
        .el-table__footer-wrapper thead div {
            // background:rgb(231, 236, 255);
            background: #488eed;
            color: #fff;
            font-size: 18px;
            font-weight: normal;
        }
        &.el-table th {
            border-bottom: 1px solid #9ab9df;
        }
        &.el-table td {
            // border-bottom:1px dashed #9ab9df;
            border-bottom: 0 none;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #ecf3fd !important;
        }
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #ecf3fd;
    }
    .el-table .el-table__body .delstatu:hover>td {
        background: transparent;
    }
}
</style>



